<template>
	<view class="product_show">
		<block v-for="(item,index) in bikeData" :key="index">
			<navigator :url="item.brandUrl" hover-class="none">
				<view class="brand-box" :style="index==0?'':'margin-bottom:16rpx;'" v-if="item.type != 'life'">
					<image :src="item.brandImg" mode="widthFix"></image>
				</view>
				<!-- <view v-if="item.type == 'life'" class="life-box">
					<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor">
						<swiper-item v-for="(item2,index) in lifeBanners" :key="index">
							<navigator :url="item2.url" hover-class="none">
								<image :src="item2.img" mode="widthFix"></image>
								<text>{{item2.img}}</text>
							</navigator>
						</swiper-item>
					</swiper>
				</view> -->
			</navigator>
			<!-- 品牌 -->
			<!-- <Brand v-if="index == 0"></Brand> -->
			<view class="acea-row p_show">
				<block v-for="(item1,index1) in item.product" :key="index1">
					<navigator :url="item1.url" hover-class="none">
						<view class="product">
							<image :src="item1.img"></image>
							<view class="title">{{item1.title}}</view>
							<view class="price" :style="item.type == 'point'?'color:#333333':'color:#C30D22'"> 
								<view :class="[item.type == 'point'?'point_original point':'shouJia']">
									<text class="i" v-if="item.type != 'point'">¥</text><!-- <icon class="jifen" v-else></icon> -->{{item1.price}}<text class="" v-if="item.type == 'point'">积分</text>
								</view>
								<view v-if="item.type == 'point'" class="point_original original_box">
									<text class="original">¥{{item1.original_price}}</text>
								</view>
							</view>
						</view>
					</navigator>
				</block>
			</view>
		</block>
	</view>
</template>

<script>
	import Brand from "@/pages/home/components/Brand";
	export default {
		name: 'EbikeShow',
		components: {
			// Brand
		},
		props: {
			
		},
		data() {
			return {
				a: 'a',
				bikeData:[
					{
						brandImg:[],
						brandUrl:'',
						type:'life',
						product:[
							{
								// 55
								'url':'/pages/shop/GoodsCon/index?id=33',
								'img':'https://yi.qj361.com/20210428133458_主图1.jpg',
								'title':'优悦-- 大力神',
								'price':'1500',
							},
							{
								//54
								'url':'/pages/shop/GoodsCon/index?id=24',
								'img':'https://yi.qj361.com/20210428124155_主图.jpg',
								'title':'金刚-- 骑境',
								'price':'2200',
							},
							{
								//42
								'url':'/pages/shop/GoodsCon/index?id=42',
								'img':'https://yi.qj361.com/20210428141435_主图.jpg',
								'title':'战神--金翌',
								'price':'2688',
							},
							{
								//41
								'url':'/pages/shop/GoodsCon/index?id=41',
								'img':'https://yi.qj361.com/20210428141042_主图1.jpg',
								'title':'战狼--万美',
								'price':'2688',
							},
						]
					},
					{
						brandImg:'',
						brandUrl:'',
						type:'point',
						product:[
							{
								'url':'/pages/shop/GoodsCon/index?id=289',
								'img':'https://yi.qj361.com/20210622091931_积分产品1@2x.png',
								'title':'ACA加湿器',
								'price':'48900',
							},
							{
								'url':'/pages/shop/GoodsCon/index?id=282',
								'img':'https://yi.qj361.com/20210622091931_积分产品2@2x.png',
								'title':'沃品护眼台灯',
								'price':'18900',
							},
							{
								'url':'/pages/shop/GoodsCon/index?id=288',
								'img':'https://yi.qj361.com/20210622091931_积分产品3@2x.png',
								'title':'凌美墨水套装',
								'price':'28900',
							},
							{
								'url':'/pages/shop/GoodsCon/index?id=285',
								'img':'https://yi.qj361.com/20210622091931_积分产品4@2x.png',
								'title':'皆美烧水壶',
								'price':'29900',
							}
						]
					},
					{
						brandImg:'',
						brandUrl:'',
						type:'jinpin',
						product:[
							{
								'url':'/pages/shop/GoodsCon/index?id=244',
								'img':'https://yi.qj361.com/20210622142742_精品产品1@2x.png',
								'title':'FILA斐乐石英表',
								'price':'159',
							},
							{
								'url':'/pages/shop/GoodsCon/index?id=243',
								'img':'https://yi.qj361.com/20210622142742_精品产品2@2x.png',
								'title':'FILA斐乐石英表',
								'price':'149',
							},
							{
								'url':'/pages/shop/GoodsCon/index?id=239',
								'img':'https://yi.qj361.com/20210622091931_精品产品3@2x.png',
								'title':'JOHN BOSS保温杯',
								'price':'99',
							},
							{
								'url':'/pages/shop/GoodsCon/index?id=214',
								'img':'https://yi.qj361.com/20210622091931_精品产品4@2x.png',
								'title':'沃品桌面无线充',
								'price':'99',
							}
						],
						brands:[]
					}
				],
				indicatorDots: true,
				autoplay: true,
				circular: true,
				indicatorColor: 'rgba(235, 235, 235, 1)',
				indicatorActiveColor: 'rgba(195, 13, 34, 1)',
				lifeBanners:[]
			};
		},
		watch:{
			brands(val){
				this.brands = val
			}
		},
		created() {
			var that = this;
			//获取商品
			uni.request({
				 url: 'https://d.qj361.com/api/yizhan/products', //仅为示例，并非真实接口地址。
				    data: {},
				    header: {},
				    success: (res) => {
						console.log("商品")
				        console.log(res.data);
						var car_life = res.data.car_life
						var integral = res.data.integral
						var boutique = res.data.boutique
						var bikeData = that.bikeData
						bikeData[0].product = car_life
						bikeData[1].product = integral
						bikeData[2].product = boutique
				    }
			});
			//获取brandImg
			uni.request({
				 url: 'https://d.qj361.com/api/yizhan/floor/banner', //仅为示例，并非真实接口地址。
				    data: {},
				    header: {},
				    success: (res) => {
						console.log("brandImg")
				        console.log(res.data);
						var bikeData = that.bikeData;
						var res = res.data;
						console.log(res);
						// bikeData[0].brandImg = res.car_life_banner.img;
						// bikeData[0].brandUrl = res.car_life_banner.url;
						bikeData[1].brandImg = res.integral_banner.img;
						bikeData[1].brandUrl = res.integral_banner.link;
						bikeData[2].brandImg = res.boutique_banner.img;
						bikeData[2].brandUrl = res.boutique_banner.link
				    }
			});
			//获取lifeBanners
			uni.request({
				 url: 'https://d.qj361.com/api/yizhan/floor/banner_img_list', //仅为示例，并非真实接口地址。
				    data: {},
				    header: {},
				    success: (res) => {
						var res = res.data;
						console.log(res);
						that.lifeBanners = res.brandImg;
						console.log(that.lifeBanners[0])
				    }
			});
		},
		mounted() {
		},
		methods: {
		}
	}
</script>

<style lang="scss">
	.product_show{	
		width:100%;
		padding:0 48rpx 0 48rpx;
		
		position: relative;
		// 广告
		.brand-box{
			// height:	220rpx;
			margin-top:16rpx;
			image{
				width:100%;
				display:block;
				// height:100%;
			}
		}
		// 商品
		.p_show{
			justify-items: center;
			justify-content:space-between; 
			.product{
				width:320rpx;
				height:460rpx;
				margin-bottom:16rpx;
				background: #FFFFFF;
				text-align:center;
				border-radius:8rpx;
				image{
					width:320rpx;
					height:320rpx;
					border-radius: 8rpx 8rpx 0 0;
				}
				.title{
					margin-top:20rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
				}
				.price{
					height: 47rpx;
					display: flex;
					justify-content: center;
					margin-top:14rpx;
					font-size: 40rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #C30D22;
					line-height: 47rpx;
					.i{
						height: 33rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #C30D22;
						line-height: 33rpx;
						margin-right:4rpx;
					}
					.jifen{
						width:22rpx;
						height:22rpx;
						background: url("https://yi.qj361.com/20210819095933_pointicon.png") no-repeat;
						background-size: cover;
						margin-right:4rpx;
						margin-bottom: 8rpx;
					}
					
					.point_original {
						// width: 50%;
						display: flex;
						justify-content: flex-end;
						align-items: flex-end;
					}
					.original_box {
						justify-content: flex-start;
					}
					.original {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 33rpx;
						// margin-bottom: 4rpx;
						padding-left: 10rpx;
						text-decoration: line-through;
					}
					.point {
						display: flex;
						align-items: flex-end;
						font-size: 32rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #FE6430;
						line-height: 45rpx;
					}
					.shouJia {
						font-size: 32rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #C30D22;
						line-height: 45rpx;
					}
				}
			}
		}
		.life-box swiper {
			width: 100%;
			height: 280rpx;
			border-radius: 8rpx;
			overflow: hidden;
			/* 兼容IOS，否则在swiper组件内的布局都不受border-radius和overflow的约束 */
			transform: translateY(0);
		}
		.life-box swiper swiper-item image {
			width: 100%;
			height: 280rpx!important;
		}
	}
</style>
